<template>
  <div class="DiseaseAnalyze item-analyze">
    <!--    疾病分析-->
    <section class="layer">
      <div class="box">
        <div class="box-header">
          <span class="box-title">查询条件</span>
        </div>
        <div class="box-body">
          <el-form ref="searchForm" :model="searchForm" label-width="90px">
            <el-row :gutter="12">
              <el-col :md="24" :lg="24" :xl="24">
                <el-form-item label="费用时间" prop="priceTime">
                  <price-time ref="priceTime" :show-default-date="true" :show-btn-select="true" @change="priceTimeChange" />
                </el-form-item>
              </el-col>
              <el-col :md="12" :lg="6" :xl="6">
                <el-form-item label="就诊类型" prop="mdtrtType">
                  <el-select v-model="searchForm.mdtrtType" clearable style="width: 100%;" placeholder="请选择">
                    <el-option label="全部" value="" />
                    <el-option v-for="item in typeOptions" :key="item.dictValue" :label="item.dictValue" :value="item.dictCode" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :md="12" :lg="6" :xl="6">
                <el-form-item label="人员类型" prop="psnType">
                  <el-select v-model="searchForm.psnType" clearable style="width: 100%;" placeholder="请选择">
                    <el-option label="全部" value="" />
                    <el-option v-for="item in peopleTypeOptions" :key="item.dictValue" :label="item.dictValue" :value="item.dictCode" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :md="12" :lg="6" :xl="6">
                <el-form-item label="二级人员类型" prop="scdPsnType">
                  <el-select v-model="searchForm.scdPsnType" clearable style="width: 100%;" placeholder="请选择" @change="scdPsnTypeChange">
                    <el-option label="全部" value="" />
                    <el-option v-for="item in scdPsnTypeOptions" :key="item.dictValue" :label="item.dictValue" :value="item.dictCode" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :md="12" :lg="6" :xl="6">
                <el-form-item label="三级人员类型" prop="lv3PsnType">
                  <el-select v-model="searchForm.lv3PsnType" clearable style="width: 100%;" placeholder="请选择">
                    <el-option v-if="searchForm.scdPsnType == '2'" label="全部" disabled value="" />
                    <el-option v-else label="全部" value="" />
                    <el-option v-for="item in lv3PsnTypeOptions" :key="item.dictValue" :disabled="item.disabled" :label="item.dictValue" :value="item.dictCode" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :md="12" :lg="6" :xl="6">
                <el-form-item label="医疗机构级别" prop="medinsLv">
                  <el-select v-model="searchForm.medinsLv" clearable style="width: 100%;" placeholder="请选择">
                    <el-option label="全部" value="" />
                    <el-option v-for="item in levelOptions" :key="item.dictValue" :label="item.dictValue" :value="item.dictCode" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :md="12" :lg="18" :xl="18">
                <el-button size="small" type="primary" @click="restSearch('searchForm')">重置</el-button>
                <el-button type="primary" size="small" @click="search">查询</el-button>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
    </section>
    <section class="layer ts2">
      <el-row :gutter="12">
        <el-col :span="12">
          <div class="box">
            <div class="box-body">
              <high-frequency-disease v-loading="chartLoading1" :axis-data="frequencyAxisData" :series-data="frequencySeriesData" />
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="box">
            <div class="box-body">
              <high-price-disease v-loading="chartLoading2" :axis-data="priceAxisData" :series-data="priceSeriesData" />
            </div>
          </div>
        </el-col>
      </el-row>
    </section>
  </div>
</template>

<script>
import PriceTime from '../components/PriceTime'
import HighFrequencyDisease from './components/high-frequency-disease'
import HighPriceDisease from './components/high-price-disease'
import { queryAvgFee, querySumPsnTime } from '../../../api/assist-decision/diseaseAnalyze'

export default {
  name: '',
  mixin: [],
  components: {
    'price-time': PriceTime,
    'high-frequency-disease': HighFrequencyDisease,
    'high-price-disease': HighPriceDisease
  },
  props: {},
  data() {
    return {
      chartLoading1: false,
      chartLoading2: false,
      searchForm: {
        mdtrtType: null,
        psnType: null,
        scdPsnType: null,
        lv3PsnType: null,
        medinsLv: null,
        beginDate: null,
        endDate: null
      },
      frequencyAxisData: [],
      frequencySeriesData: [],
      priceAxisData: [],
      priceSeriesData: []
    }
  },
  computed: {
    typeOptions: function() {
      return this.$store.getters.selectMaps.MDTRT_TYPE
    },
    peopleTypeOptions: function() {
      return this.$store.getters.selectMaps.PSN_TYPE
    },
    scdPsnTypeOptions: function() {
      return this.$store.getters.selectMaps.SCD_PSN_TYPE
    },
    lv3PsnTypeOptions: function() {
      return this.$store.getters.selectMaps.LV3_PSN_TYPE
    },
    levelOptions: function() {
      return this.$store.getters.selectMaps.MEDINS_LV
    }
  },
  watch: {},
  created() {
  },
  mounted() {
  },
  methods: {
    handleChange() {},
    //  二级人员类型选择改变
    scdPsnTypeChange(v) {
      this.searchForm.lv3PsnType = null
      if (v === '1') {
        this.lv3PsnTypeOptions.forEach((item) => {
          if (item.dictCode === '4') {
            this.$set(item, 'disabled', true)
          } else {
            this.$set(item, 'disabled', false)
          }
        })
      } else if (v === '2') {
        this.lv3PsnTypeOptions.forEach(item => {
          if (item.dictCode !== '4') {
            this.$set(item, 'disabled', true)
          } else {
            this.$set(item, 'disabled', false)
          }
        })
      }
    },
    priceTimeChange(v) {
      this.searchForm.beginDate = v[0] || null
      this.searchForm.endDate = v[1] || null
    },
    restSearch(formName) {
      this.$refs.priceTime.reset() // 子组件重置
      this.frequencyAxisData = []
      this.frequencySeriesData = []
      this.priceAxisData = []
      this.priceSeriesData = []
      this.$refs[formName].resetFields()
    },
    search() {
      const data = {
        beginDate: this.searchForm.beginDate,
        endDate: this.searchForm.endDate,
        lv3PsnType: this.searchForm.lv3PsnType,
        mdtrtType: this.searchForm.mdtrtType,
        medinsLv: this.searchForm.medinsLv,
        psnType: this.searchForm.psnType,
        scdPsnType: this.searchForm.scdPsnType
      }
      this.chartLoading1 = true
      this.chartLoading2 = true
      //  queryAvgFee高次均费用疾病排名TOP10  querySumPsnTime高频次疾病排名TOP10
      Promise.all([queryAvgFee(data), querySumPsnTime(data)]).then(res => {
        this.frequencyAxisData = res[0].data.map(item => {
          return item.diseName
        })
        this.frequencySeriesData = res[0].data.map(item => {
          return { name: item.diseName, value: item.avgFee }
        })
        console.log(this.frequencySeriesData)
        this.priceAxisData = res[1].data.map(item => {
          return item.diseName
        })
        this.priceSeriesData = res[1].data.map(item => {
          return { name: item.diseName, value: item.sumPsnTime }
        })
        this.chartLoading1 = false
        this.chartLoading2 = false
      }).catch(() => {
        this.chartLoading1 = false
        this.chartLoading2 = false
      })
    }
  }
}
</script>

<style scoped lang="scss"></style>
